import { Suspense } from 'react';
import routes from './routes';
import { getToken } from '@/utils'
import {
    Routes,
    Route,
    useLocation,
    useNavigate,
    useParams,
    useSearchParams,
} from 'react-router-dom';

import Login from "@/pages/Login";
import TeacherHome from "@/pages/TeacherHome";
import StudentHome from "@/pages/StudentHome";
import LoadingPage from "@/components/LoadingPage";

// 统一渲染的组件:在这里可以做一些事情
// 权限，登录校验，传递属性
const Element = function Element(props) {
    let { type, component: Component } = props;
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    const [usp] = useSearchParams();
    const isToken = getToken()
    // 权限判断是否有token
    if (!isToken) {
        return <Login
            navigate={navigate}
            location={location}
            parms={params}
            usp={usp}
            />
    }

    // 禁止老师和学生页面互相访问
    if (type === 'student' && localStorage.getItem("role") !== '2') {
        return <TeacherHome
            navigate={navigate}
            location={location}
            parms={params}
            usp={usp}
        />
    }
    if (type === 'teacher' && localStorage.getItem("role") !== '1') {
        return <StudentHome
            navigate={navigate}
            location={location}
            parms={params}
            usp={usp}
        />
    }
    // 最后要渲染的
    return (
        type === 'root' ?
        <Component
            navigate={navigate}
            location={location}
            parms={params}
            usp={usp}
        /> :
            <Suspense fallback={<LoadingPage/>}>
                <Component
                navigate={navigate}
                      location={location}
                      parms={params}
                      usp={usp}
            />
            </Suspense>
    )
};

// 递归创建 Route
const createRoute = function createRoute(routes) {
    return (
        <>
            {routes.map((item, index) => {
                let { path, children } = item;
                {
                    /* 每一次路由匹配成功，不直接渲染组件，而是渲染Element，在Element中做一些特殊处理后再去渲染我们真实要渲染的组件 */
                }
                return (
                    <Route key={index} index={path===undefined} path={path} element={<Element {...item} />}>
                        {Array.isArray(children) ? createRoute(children) : null}
                    </Route>
                );
            })}
        </>
    );
};
// 路由容器
export default function RouterView() {
    return (
            <Routes>{createRoute(routes)}</Routes>
    );
}

// 创建 withRouter,使得非路由组件获得路由信息
export const withRouter = function withRouter(Component) {
    return function Hoc(props) {
        const location = useLocation();
        const navigate = useNavigate();
        const params = useParams();
        const [usp] = useSearchParams();
        return (
            <Component
                navigate={navigate}
                location={location}
                parms={params}
                usp={usp}
                {...props}
            />
        );
    };
};